<template>
<bpm-c-subtitle :title="getLanguage('title.processLink')"
                v-show="showLink[2]"
                :isCollapse="false">
  <bpm-c-form>
  <bpm-c-block v-if="!readonlys[0]"
                :preadonly="readonlys[0]"
                v-show="showLink[0]"
                :ptitle="getLanguage('label.trainApplicationLink')"
                pinputtype="trainlink"
                @valueChanged="valueChanged($event,0)"
                v-model="trainBtNo" />
  <bpm-c-block v-else
               :preadonly="readonlys[0]"
               v-show="showLink[0]"
               :ptitle="getLanguage('label.trainApplicationLink')"
               pinputtype="url"
               v-model="trainapplicationlink" />
  <bpm-c-block v-if="!readonlys[1]"
               :preadonly="readonlys[1]"
                v-show="showLink[1]"
                :ptitle="getLanguage('label.abroadApplicationLink')"
                pinputtype="aboardlink"
                @valueChanged="valueChanged($event,1)"
                v-model="abroadBtNo" />
  <bpm-c-block v-else
               :preadonly="readonlys[1]"
               v-show="showLink[1]"
               :ptitle="getLanguage('label.abroadApplicationLink')"
               pinputtype="url"
               v-model="abroadapplicationlink" />
  </bpm-c-form>
</bpm-c-subtitle>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'bpmDLinkarea',
  data () {
    return {
      readonlys: [false, false],
      content: ['', '']
    }
  },
  props: {
  },
  computed: {
    ...mapState(['pageTypeEnum', 'pageType', 'tsId', 'ssc', 'ssc.reimburse', 'lang']),
    trainapplicationlink () {
      return JSON.stringify({
        text: this.ssc.reimburse.whBtReimburse.trainBtNo,
        url: this.ssc.reimburse.whBtReimburse.trainapplicationlink
      })
    },
    trainBtNo: {
      get () {
        return JSON.stringify({
          name: this.ssc.reimburse.whBtReimburse.trainBtNo,
          value: this.ssc.reimburse.whBtReimburse.trainBtNo
        })
      },
      set (value) {
        let object = JSON.parse(value)
        object && this.$store.commit('updateDataSscReimburseWhBtReimburse', {
          name: 'trainBtNo',
          value: object.value
        })
      }
    },
    abroadapplicationlink () {
      return JSON.stringify({
        text: this.ssc.reimburse.whBtReimburse.abroadBtNo,
        url: this.ssc.reimburse.whBtReimburse.abroadapplicationlink
      })
    },
    abroadBtNo: {
      get () {
        return JSON.stringify({
          name: this.ssc.reimburse.whBtReimburse.abroadBtNo,
          value: this.ssc.reimburse.whBtReimburse.abroadBtNo
        })
      },
      set (value) {
        let object = JSON.parse(value)
        object && this.$store.commit('updateDataSscReimburseWhBtReimburse', {
          name: 'abroadBtNo',
          value: object.value
        })
      }
    },
    showLink: function () {
      let showLinkTemp = [true, true, true]
      if (this.pageType === this.pageTypeEnum.draft) {
        showLinkTemp = [true, true, true]
      } else {
        if (this.ssc.reimburse.whBtReimburse.trainapplicationlink === null ||
          this.ssc.reimburse.whBtReimburse.trainapplicationlink === '' ||
          typeof this.ssc.reimburse.whBtReimburse.trainapplicationlink === 'undefined') {
          showLinkTemp[0] = false
        }
        if (this.ssc.reimburse.whBtReimburse.abroadapplicationlink === null ||
          this.ssc.reimburse.whBtReimburse.abroadapplicationlink === '' ||
          typeof this.ssc.reimburse.whBtReimburse.abroadapplicationlink === 'undefined') {
          showLinkTemp[1] = false
        }
        if (!(showLinkTemp[0] || showLinkTemp[1])) {
          showLinkTemp[2] = false
        }
      }
      return showLinkTemp
    }
  },
  created () {
    if (this.pageType === this.pageTypeEnum.draft) {
      this.readonlys = [false, false]
    } else {
      this.readonlys = [true, true]
    }
  },
  methods: {
    valueChanged (value, index) {
      console.log('linkarea valueChanged ......', value)
      if (index === 0) { // 培训申请链接
        // let json = {
        //   btNo: value.value,
        //   url: value.name
        // }
        // JsReimburseDraft.callTrainBtNo(json)
      } else if (index === 1) { // 出国申请链接
        // let json = {
        //   btNo: value.value,
        //   url: value.name
        // }
        // JsReimburseDraft.callAbroadBtNo(json)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
